<script lang="ts" setup>
import { useRoleStore } from "@/stores/role.ts"
import type { RoleStructure } from "@/api/role.ts"

const store = useRoleStore()
const { list, total } = toRefs(store.state)
const { proxy } = getCurrentInstance()!
const page = ref(1)
const pageSize = ref(10)
watchEffect(() => {
  store.getRoleList({
    page: page.value,
    pageSize: pageSize.value
  })
})

const handleSizeChange = (val: number) => {
  pageSize.value = val
}
const handleCurrentChange = (val: number) => {
  page.value = val
}

const editType = ref(-1)
const editData = ref<RoleStructure | undefined>(undefined)
const setting = ref(false)
const panelTitle = computed(() =>
  editType.value === 0 ? "添加角色" : "编辑角色"
)

// 添加角色
const handleAddRole = () => {
  editType.value = 0
  setting.value = true
  editData.value = {} as RoleStructure
}

// 编辑角色
const handleEditRole = (role: RoleStructure) => {
  editType.value = 1
  editData.value = { ...role }
  setting.value = true
}

// 删除角色
const handleDeleteRole = async (role: RoleStructure) => {
  try {
    await proxy?.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    await store.deleteRole({
      ...role,
      page: page.value,
      pageSize: pageSize.value
    })
    proxy?.$message.success("删除成功")
  } catch {
    proxy?.$message.info("取消")
  }
}

const addRole = async (role: RoleStructure) => {
  await store.addRole({
    ...role,
    page: page.value,
    pageSize: pageSize.value
  })
  proxy?.$message.success("添加成功")
  setting.value = false
}

const editRole = async (role: RoleStructure) => {
  await store.updateRole({
    ...role,
    page: page.value,
    pageSize: pageSize.value
  })
  proxy?.$message.success("编辑成功")
  setting.value = false
}

const handleSubmit = async (editData: RoleStructure) => {
  if (editType.value === 0) {
    await addRole(editData)
  } else {
    await editRole(editData)
  }
}
</script>

<template>
  <div p-30px>
    <h2>角色管理</h2>
    <el-button @click="handleAddRole">角色添加</el-button>
    <el-table :data="list" style="width: 100%">
      <el-table-column label="角色ID" prop="id"></el-table-column>
      <el-table-column label="角色名称" prop="name"></el-table-column>
      <el-table-column label="角色描述" prop="description"></el-table-column>
      <el-table-column label="角色状态" prop="status"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleEditRole(scope.row)"
            >编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="handleDeleteRole(scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-model:current-page="page"
      v-model:page-size="pageSize"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></pagination>

    <right-panel v-model="setting" :title="panelTitle">
      <editor-role
        :data="editData"
        :type="editType"
        @submit="handleSubmit"
      ></editor-role>
    </right-panel>
  </div>
</template>

<style scoped></style>
